<template>
    <search-top-bar @goSearch="goSearch" @inputVal="syncInputValFun"/>
    <div class="tab-box">
        <div
            v-for="(item, index) in tabArr"
            :key="index"
            @click="clickTab(item)"
            class="single-tab"
            :class="{ active: active === item.type }"
        >
            <div class="big-text">{{ item.text }}</div>
            <div class="e-text">{{ item.eText }}</div>
            <div class="dot-box-out">
                <div class="dot-box">
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dot"></div>
            </div>
            <!--    <image
                class="yellow-dot img"
                mode="aspectFill"
                src="/pages/subPackageA/static/yellow-dot.png"
            ></image> -->
            <!-- <image
                class="tab-item img"
                mode="heightFix"
                :src="active === item.type ? item.activeImgUrl : item.imgUrl"
            ></image> -->
        </div>
    </div>
    <div class="result">
        <div
            v-for="(item, index) in resultArr"
            :key="index"
            @click="goDetail(item)"
            class="single-result"
        >
            <div class="left">
                <div class="title">{{ item.title }}</div>
                <div class="desc">{{ item.content}}</div>
                <!-- <div class="tag-box" v-if="item?.tags?.length">
                    <uv-tags
                        v-for="(tag, i) in item.tags"
                        :key="i"
                        :text="tag.name"
                        type="warning"
                        plain
                        plainFill
                    ></uv-tags>
                </div> -->
            </div>
            <!--  <div class="right">
                <image
                    class="result-img img"
                    mode="widthFix"
                    :src="item.url"
                ></image>
            </div> -->
        </div>
		<uv-load-more :status="loadStatus" loadmoreText="" :nomoreText="nomoreText"/>
        <div class="no-data" v-if="displayNoData">
            暂无符合条件的内容<br />换个词试试吧！
        </div>
    </div>
</template>
<script setup>
import useShare from "@/utils/composables/useShare";
import searchTopBar from "./searchTopBarHaveBack.vue";
import { getSeachResultApi } from "@/api/index.js";
import { useUserStore } from "@/stores";
import { onReachBottom } from '@dcloudio/uni-app';
const userStore = useUserStore();
const { userId } = storeToRefs(userStore);
const { onShareAppMessage, onShareTimeline } = useShare({
    path: "/pages/index/index",
});
const tabArr = ref([
    {
        text: "设计师",
        eText: "Designer",
        type: "DESIGNER",
        // imgUrl: "/pages/subPackageA/static/shejishi.png",
        // activeImgUrl: "/pages/subPackageA/static/shejishi-active.png",
    },
    {
        text: "案例",
        eText: "Case",
        type: "CASE",
        // imgUrl: "/pages/subPackageA/static/anli.png",
        // activeImgUrl: "/pages/subPackageA/static/anli-active.png",
    },
    {
        text: "新闻&活动",
        eText: "News & Events",
        type: "NEWS",
        // imgUrl: "/pages/subPackageA/static/xwhd.png",
        // activeImgUrl: "/pages/subPackageA/static/xwhd-active.png",
    },
    {
        text: "供应链",
        eText: "Supply Chain",
        type: "SUPPLY",
        // imgUrl: "/pages/subPackageA/static/gyl.png",
        // activeImgUrl: "/pages/subPackageA/static/gyl-active.png",
    },
]);
const loadStatus=ref('loadmore');
const searchParams=reactive({
	pageNum:1,
	pageSize:20,
	totalPages:0,
});
const nomoreText=ref('');
const active = ref("DESIGNER");
const resultArr = ref([]);
const displayNoData = ref(false);
const keyWord = ref("");
const syncInputValFun=(val)=>{
	console.log(val,'val---');
	keyWord.value=val;
}
const searchFun = () => {
    if (!keyWord.value.trim()) return;
	loadStatus.value = 'loading';
    getSeachResultApi({
        type: active.value,
        keyword: keyWord.value.trim(),
		pageNum:searchParams.pageNum,
		pageSize:searchParams.pageSize,
    }).then((res) => {
        console.log(res, "---获取搜索结果---res---");
		searchParams.totalPages=Math.ceil(res.total/searchParams.pageSize);
        const arr = res.rows?.length ? res.rows : [];
		resultArr.value.push(...arr);
        displayNoData.value = resultArr.value.length ? false : true;
		if (searchParams.pageNum * searchParams.pageSize >= res.total) {
			 loadStatus.value = 'nomore';
			 nomoreText.value=resultArr.value.length?'没有更多了':'';
		} else {
			 loadStatus.value = 'loadmore';
		}
    });
};
const clickTab = (item) => {
	console.log('clickTab')
    active.value = item.type;
	searchParams.pageNum=1;
	resultArr.value=[];
    searchFun();
}; //
const goDetail = (curr) => {
    if (userId.value) {
        uni.navigateTo({
            url: `/pages/subPackageA/pictureCardsDetail/index?id=${curr.id}`,
        });
    } else {
        uni.navigateTo({
            url: "/pages/subPackageA/login/index",
        });
    }
};
const goSearch = (name) => {
    //console.log("搜索---", name);
    keyWord.value = name;
	searchParams.pageNum=1;
	resultArr.value=[];
    searchFun();
};
onReachBottom(()=>{
	console.log('加载更多----');
	if (searchParams.totalPages > searchParams.pageNum) {
		searchParams.pageNum+=1
		searchFun()
	}  
})
</script>
<style lang="scss">
page {
    background: #000;
}
</style>
<style lang="scss" scoped>
.result {
    margin-top: 40rpx;
    padding: 30rpx;
    .no-data {
        color: #fff;
        text-align: center;
        font-weight: 500;
        font-size: 36rpx;
        line-height: 60rpx;
    }
    .single-result {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8rpx;
        padding: 30rpx;
        display: flex;
        margin-bottom: 30rpx;
		min-height: 150rpx;
		box-sizing: border-box;
        .left {
            flex: auto;
            .title {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 31rpx;
                color: rgba(255, 255, 255, 1);
                text-align: left;
                font-style: normal;
                text-transform: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-bottom: 16rpx;
            }
            .desc {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 27rpx;
                color: rgba(255, 255, 255, 0.6);
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
            .tag-box {
                margin-top: 20rpx;
                display: flex;
                gap: 10rpx;
            }
        }
        .right {
            flex: 0 0 162rpx;
            margin-left: 31rpx;
            .result-img {
                width: 162rpx;
                border-radius: 8rpx;
            }
        }
    }
}
.tab-box {
    display: flex;
    justify-content: center;
    gap: 40rpx;
    margin-top: 40rpx;
    .single-tab {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20rpx;
        .tab-item {
            //height: 80rpx;
        }
        &.active {
            .big-text {
                //color:#edcd95;
            }
            .dot-box-out {
                .dot {
                    background: #fff;
                }
            }
        }
        .dot-box-out {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .dot-box {
                display: flex;
                justify-content: space-between;
                margin-bottom: 6rpx;
                gap: 20rpx;
            }
            .dot {
                width: 10rpx;
                height: 10rpx;
                border-radius: 50%;
                background: #edcd95;
            }
        }
        .big-text {
            font-size: 28rpx;
            color: #edcd95;
        }
        .e-text {
            font-size: 24rpx;
            color: #fff;
            font-style: italic;
        }
        .yellow-dot {
            width: 50rpx;
            height: 30rpx;
        }
    }
}
</style>
